<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">{{score}}</div>
        <script>
            let vm = new Vue({
                el: '#app',
                data() {
                    return {
                        num: 60, // 60-70 C 71-80 B  81-90 A  91-100 S
                        // score: '',
                    };
                },
                methods: {},
                computed: {
                    // score() {
                    //     if (this.num > 60 && this.num < 70) {
                    //         this.score = 'C';
                    //     }
                    // },
                    score: {
                        // if (this.num >= 60 && this.num <= 70) {
                        //     return 'C';
                        // }
                        get() {
                            console.log('get被触发了');
                            return this.num * 10;
                        }, // 获取
                        set(val) {
                            console.log(val);
                            // console.log(this);
                            // this.score = val;
                            this.num = val;
                            console.log('set被触发了');
                        }, // 设置

                        // return this.num * 10;
                    },

                    // score() {
                    //     return this.num * 10;
                    // },
                },
            });

            let c = 3;
            let obj = {
                a: 1,
                b: 2,
                get c() {
                    console.log('访问C');
                    return c;
                },
                set c(val) {
                    console.log('设置C');
                    c = val;
                },
            };

            console.log(obj.c);
            obj.c = 5;
            console.log(obj);

            let obj2 = {
                a: 1,
                b: 2,
            };
            obj2.c = 5;
            let dd = 100;
            Object.defineProperty(obj2, 'd', {
                // value: 100,  // 被修改属性所赋予的值
                // writable: true, // 是否可以修改 默认是false
                // configurable: true, //是否可以删除 默认是false
                enumerable: true, // 是否可以枚举 默认是false
                get: function () {
                    console.log('get');
                    return dd;
                },
                set: function (val) {
                    dd = val;
                    console.log(val);
                    console.log('set');
                },
            });
            obj2.a = 100;
            // Object.defineProperty(obj2, 'a', {
            //     value: 100,
            // });
            // obj2.d = 1000;

            // delete obj2.d;

            // for (const key in obj2) {
            //     console.log(key);
            // }
            // obj2.d;
            obj2.d = 1000;
            console.log(obj2);

            let keyArr = Object.keys(obj2);

            let nu = Object.create(null); // 是没有任何属性的
            nu.a = 100;
            for (const key in nu) {
                console.log(key);
                console.log(nu[key]);
            }
        </script>
    </body>
</html>
